<template>
  <div class="research-page">
    <Header />
    <main class="page-content">
      <div class="container">
        <h1 class="page-title">Research</h1>

        <!-- 研究方向列表 -->
        <div class="research-areas">
          <div v-if="researchLoading" class="loading"></div>
          <div v-else-if="researchError" class="error">{{ researchError }}</div>
          <div v-else>
            <div v-for="area in researchAreas" :key="area.content_id" class="research-area">
              <div class="area-main">
                <div class="area-text">
                  <div class="area-header">
                    <h2>{{ area.title }}</h2>
                  </div>
                  <div class="area-content">
                    <div class="area-description" v-html="area.content"></div>
                    <div v-if="area.user_list && area.user_list.length > 0" class="area-members">
                      <h3>Research Team:</h3>
                      <div class="members-list">
                        <span v-for="(user, index) in area.user_list" :key="user.user_id" class="member-item">
                          {{ user.user_name }}<span v-if="index < area.user_list.length - 1">, </span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="area.image_url" class="area-image">
                  <img :src="getImageUrl(area.image_url)" :alt="area.title">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Collaboration Opportunities -->
        <section class="section collaboration">
          <h2 class="section-title">Collaboration Opportunities</h2>
          <div class="card">
            <p>
              We welcome collaboration partners from both academia and industry. If you are interested in our research 
              or would like to explore collaboration opportunities, please contact us via email.
            </p>
            <router-link to="/join-us" class="btn">Learn More</router-link>
          </div>
        </section>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
import { getResearchList, API_BASE_URL } from '@/utils/api'

export default {
  name: 'Research',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      researchAreas: [],
      researchLoading: false,
      researchError: null
    }
  },
  async mounted() {
    await this.fetchResearchList()
  },
  methods: {
    /**
     * 获取Research列表
     */
    async fetchResearchList() {
      this.researchLoading = true
      this.researchError = null
      try {
        const data = await getResearchList()
        this.researchAreas = data.list || []
      } catch (error) {
        console.error('获取Research列表失败:', error)
        this.researchError = error.message || '获取研究方向列表失败'
        this.researchAreas = []
      } finally {
        this.researchLoading = false
      }
    },
    
    /**
     * 获取图片完整URL
     */
    getImageUrl(imageUrl) {
      if (!imageUrl) return ''
      if (imageUrl.startsWith('http')) {
        return imageUrl
      }
      // Research接口返回的image_url格式为 "images/2025/11/15/..."，需要添加 /upload/ 前缀
      if (imageUrl.startsWith('images/')) {
        return `${API_BASE_URL}/upload/${imageUrl}`
      }
      // 如果image_url是以/开头，直接使用
      if (imageUrl.startsWith('/')) {
        return `${API_BASE_URL}${imageUrl}`
      }
      // 其他情况，添加/前缀
      return `${API_BASE_URL}/${imageUrl}`
    }
  }
}
</script>

<style scoped>
/* Override container width for this page only */
.research-page .container {
  max-width: 1200px;
}

.research-page .page-title {
  text-align: center;
}

.research-area {
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: 35px;
  margin-bottom: 35px;
  box-shadow: none;
}

.research-area:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.area-main {
  display: flex;
  gap: 30px;
}

.area-text {
  flex: 1;
  min-width: 0;
}

.area-image {
  flex-shrink: 0;
  width: 400px;
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
}

.area-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.area-image:hover img {
  transform: scale(1.05);
}

.area-header {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
}

.area-header h2 {
  color: #333;
  font-size: 1.6em;
  font-weight: normal;
  margin: 0;
}

.area-description {
  color: var(--text-color);
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 25px;
}

.area-description :deep(p) {
  margin-bottom: 15px;
}

.area-description :deep(p:last-child) {
  margin-bottom: 0;
}

.area-members {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--border-color);
}

.members-list {
  color: var(--text-color);
  font-size: 1em;
  line-height: 1.8;
}

.member-item {
  display: inline;
}

.loading {
  text-align: center;
  padding: 60px 0;
  color: #666;
  font-size: 1.1em;
}

.error {
  text-align: center;
  padding: 60px 0;
  color: #e74c3c;
  font-size: 1.1em;
}

.area-content h3 {
  color: var(--secondary-color);
  margin: 25px 0 15px;
  font-size: 1.3em;
}

.research-topics {
  list-style: none;
  padding-left: 0;
}

.research-topics li {
  padding: 10px 0;
  padding-left: 30px;
  position: relative;
  color: var(--text-color);
}

.research-topics li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

.area-highlights {
  background-color: var(--light-gray);
  padding: 20px;
  border-radius: 8px;
  margin-top: 25px;
}

.highlights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.highlight-item {
  padding: 10px 15px;
  background-color: white;
  border-left: 4px solid var(--primary-color);
  border-radius: 4px;
  color: var(--text-color);
}

.collaboration {
  margin-top: 60px;
}

.collaboration .card {
  text-align: center;
}

.collaboration p {
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 25px;
  color: var(--text-color);
}

@media (max-width: 768px) {
  .research-area {
    padding: 25px;
  }
  
  .area-main {
    flex-direction: column;
  }
  
  .area-image {
    width: 100%;
  }
  
  .area-header h2 {
    font-size: 1.6em;
  }
}
</style>

